<template>
  <div style="display: flex; height:100%; width:50%; margin:0 auto;">
    <div class="card" style="flex:1">
      <div style="margin-left:20px; padding:20px 20px; font-size:large; font-weight:bolder;">个人信息</div>
      <div >
        <el-form ref="formRef" :model="data.user" label-position="right" label-width="80px" padding="20px 30px 20px 0">
          <el-form-item prop="username" label="账号">
            <el-input v-model="data.user.username" autocomplete="off" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item label="头像">
            <div style="display: flex; align-items: center; gap: 20px">
              <el-image
                  v-if="data.user.avatar"
                  :src="data.user.avatar"
                  style="width: 80px; height: 80px; border-radius: 50%"
                  fit="cover"
              />
              <span v-else style="color: #999">未设置头像</span>
            </div>
          </el-form-item>
          <el-form-item prop="name" label="昵称">
            <el-input v-model="data.user.name" autocomplete="off" placeholder="请输入昵称"/>
          </el-form-item>
          <el-form-item prop="phone" label="电话">
            <el-input v-model="data.user.phone" autocomplete="off" placeholder="请输入电话"/>
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input v-model="data.user.email" autocomplete="off" placeholder="请输入邮箱"/>
          </el-form-item>
          <el-form-item prop="sex" label="性别" v-if="data.user.role === 'USER'">
            <el-radio-group v-model="data.user.sex">
              <el-radio value="男" size="small">男</el-radio>
              <el-radio value="女" size="small">女</el-radio>
              <el-radio value="未知" size="small">未知</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="password">
            <el-button type="primary" @click="updatePassword">修改密码</el-button>
          </el-form-item>
          <el-form-item prop="avatar">
            <el-upload
                action="http://localhost:9999/files/upload"
                :headers="{token: data.user.token}"
                list-type="picture"
                :on-success="handleFileSuccess">
              <el-button type="primary" >更换头像</el-button>
            </el-upload>
          </el-form-item>
          <div style="text-align: center;">
            <el-button type="primary" style="padding:20px 40px; " @click="save">保存</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  
</template>

<script setup >
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  user:JSON.parse(localStorage.getItem('code_user') || '{}'),
})

const handleFileSuccess = (res) => {
  data.user.avatar = res.data
}

const emit = defineEmits(['updatePerson'])

const updatePassword = () => {
  router.push("/manager/updatepassword")
}

const save = () => {
  let url
  if (data.user.role === 'ADMIN') {
    url = "/admin/update"
  }
  if (data.user.role === 'USER') {
    url = "/user/update"
  }
  request.put(url, data.user).then((res) => {
    if (res.code === '200') {
      localStorage.setItem("code_user", JSON.stringify(data.user))
      emit('updatePerson')
      ElMessage.success("保存成功")
    }
  })
}
</script>